/**
 * Created by weiwei on 2017/3/3.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
var {width,height} = require('Dimensions').get('window');
var LazyFind = React.createClass({
    getDefaultProps(){
        return {
            image:'',
            avatar:'',
            userName:'',
            phoneNumber:''
        }
    },
    render() {
        return (
            <TouchableOpacity activeOpacity={0.8}>
            <View style={styles.container}>
                <Image source={{uri:this.props.image}} style={styles.findImage}/>
                {/*头像*/}
                <View style={styles.avatarBox}>
                    <Image source={{uri:this.props.avatar}} style={styles.avatarImage}/>
                    <Text style={{color:'#ffffff'}}>{this.props.userName}</Text>
                </View>
                {/*照片张数*/}
               <View style={[styles.positionStyle,styles.phoneNumStyle]}>
                   <Text style={{color:'#ffffff',fontSize:18,fontWeight:'400'}}>{this.props.phoneNumber}</Text>
                   <Text style={{color:'#ffffff'}}>张照片</Text>
               </View>
                {/*收藏 评论*/}
                <View style={[styles.positionStyle,styles.messageStyle]}>
                    <Icon name="heart-o" size={25} color="#ffffff" style={{marginTop:3,marginRight:20}}/>
                    <Icon name="commenting-o" size={25} color="#ffffff" />
                </View>
            </View>
            </TouchableOpacity>
        );
    },
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        height:200,
        marginBottom:20,
        backgroundColor:'transparent'
    },
    findImage:{
        width:width - 20,
        height:200,
        borderRadius:5,
        resizeMode:'cover'
    },
    avatarBox:{
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        left:18,
        bottom:-10,
        zIndex:100
    },
    avatarImage:{
        width:43,
        height:43,
        borderRadius:20.5,
        borderWidth:1.5,
        marginRight:13,
        borderColor:'#08c8c1'
    },
    positionStyle:{
        flexDirection:'row',
        position:'absolute',
        alignItems:'center',
    },
    phoneNumStyle:{
        top:20,
        right:20,
        zIndex:100,
    },
    messageStyle:{
        bottom:10,
        right:20,
        zIndex:100,
    }
});
module.exports = LazyFind;